<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .error{
            font-size: 12px;
            color: red;
        }
        .ok{
            color: green;
        }
    </style>
    <script>
        // 定义一个正则表达式对象
        // var reg = new RegExp('a','i')
        var reg = /^a\d{3}\w?[xyz](mn){2}a|b[\u4E00-\u9FA5]+$/i

        // console.log(reg.test('a250_xmnmnb万和'))

        function checkUsername(){
            // 用户名只能由数字、字母、下划线组成，且只能以字母开头或结尾，长度为5-12个字符
            var username=document.getElementById('username').value 
            var reg = /^[a-z]\w{3,10}[a-z]$/i
            if(!reg.test(username)){
                document.getElementById('usernameInfo').innerText = '用户名只包含数字、字母、下划线，且以字母开头或结尾，长度为5-12位'
                document.getElementById('usernameInfo').classList.remove('ok')
                document.getElementById('usernameInfo').classList.add('error')
                return false
            }
            document.getElementById('usernameInfo').innerText = 'ok'
            document.getElementById('usernameInfo').classList.remove('error')
            document.getElementById('usernameInfo').classList.add('ok')
            return true
        }

        function checkEmail(){
            // tom@qq.com  jack@sina.com.cn   tom.+-@com.cn.cn.cn.cn
            // var reg = /^\w+@\w+\.\w+$/i;
            var reg = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
            var email = document.getElementById('email').value
            if(!reg.test(email)){
                document.getElementById('emailInfo').innerText = '邮箱格式不正确'
                document.getElementById('emailInfo').classList.remove('ok')
                document.getElementById('emailInfo').classList.add('error')
                return false
            }
            document.getElementById('emailInfo').innerText = 'ok'
            document.getElementById('emailInfo').classList.remove('error')
            document.getElementById('emailInfo').classList.add('ok')
            return true
        }

        function checkPhone(){
            var reg = /^1\d{10}$/

        }

        function checkPassword(){
            // 密码只能由数字、字母组成，长度为6-10位


        }

        function checkRepassword(){
            // 两次密码必须相同


        }

        window.onload = function(){
            document.getElementById('registerForm').onsubmit = function(){
                return checkUsername() && checkEmail()
            }
        }

    </script>
</head>
<body>
    <form action="" method="get" id="registerForm">
        用户名：<input type="text" name="username" id="username" onblur="checkUsername()"> <span id="usernameInfo"></span> <br>  
        邮箱：<input type="text" name="email" id="email" onblur="checkEmail()"> <span id="emailInfo"></span> <br>
        手机号：<input type="text" name="phone" id="phone" onblur="checkPhone()"> <br>
        密码：<input type="password" name="password" id="password"> <br>
        确认密码：<input type="password" name="repassword" id="repassword"> <br>

        <input type="submit" value="注册">
    </form>
</body>
</html>